<template>
  <nav class="text-center">Tailwind CSS with Vue</nav>
  <hr />

  <main class="text-center">
    <form>
      <label>
        username:
        <input
          type="text"
          :class="`${inputStyle} ${username_class}`"
          v-model="username"
        />
      </label>

      <br />

      <label>
        password:
        <input
          type="password"
          :class="`${inputStyle} ${password_class}`"
          v-model="password"
        />
      </label>
    </form>
  </main>
</template>

<script setup>
import { ref, watch } from 'vue';

const username = ref('');
const password = ref('');

const inputStyle = 'border-solid mt-4 border-2 rounded';

const username_class = ref('border-black');
const password_class = ref('border-black');

watch(
  [username, password],
  ([currentUsername, currentPassword], [preUsername, prePassword]) => {
    username_class.value = password_class.value = 'border-black';

    if (
      preUsername.length !== currentUsername.length &&
      currentUsername.length < 4
    ) {
      username_class.value = 'border-red-400';
    }

    if (
      prePassword.length !== currentPassword.length &&
      currentPassword.length < 4
    ) {
      password_class.value = 'border-red-400';
    }
  }
);
</script>
